﻿<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"  %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="ApplicationPages" Namespace="Microsoft.SharePoint.ApplicationPages.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server"><SharePoint:ListProperty Property="TitleOrFolder" runat="server"/> - <SharePoint:ListProperty Property="CurrentViewTitle" runat="server"/></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
	<SharePoint:ListProperty Property="TitleBreadcrumb" runat="server"/>
	<SharePoint:UIVersionedContent UIVersion="4" runat="server">
		<ContentTemplate>
			<span class="ms-ltviewselectormenuheader" runat="server">
				<SharePoint:ListTitleViewSelectorMenu AlignToParent="true" id="LTViewSelectorMenu" runat="server" />
			</span>
		</ContentTemplate>
	</SharePoint:UIVersionedContent>
</asp:Content>
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
	<SharePoint:RssLink runat="server" />

    <SharePoint:CssRegistration ID="CssRegistration1" After="corev4.css" name="<% $SPUrl:~SiteCollection/_layouts/PepsiCo.RBS/cupertino/jquery-ui-1.10.3.custom.css %>" runat="server"/> 

    <SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/_layouts/PepsiCo.RBS/jquery-1.8.3.min.js" runat="server" />
    <SharePoint:Scriptlink ID="ScriptLink2" Name="~SiteCollection/_layouts/PepsiCo.RBS/jquery-ui-1.10.3.custom.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink3" Name="~SiteCollection/_layouts/PepsiCo.RBS/jquery.SPServices-0.7.2.min.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink4" Name="~SiteCollection/_layouts/PepsiCo.RBS/jquery.icheck.min.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink5" Name="~SiteCollection/_layouts/PepsiCo.RBS/colour-calendar.js?v=1.82" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink6" Name="~SiteCollection/_layouts/PepsiCo.RBS/url.min.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink11" Name="~SiteCollection/_layouts/PepsiCo.RBS/moment.min.js" runat="Server" />

</asp:content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"><SharePoint:ViewIcon Width="145" Height="54" runat="server" /></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server">
<SharePoint:RecentChangesMenu runat="server" id="RecentChanges"/>
<SharePoint:ModifySettingsLink runat="server" />
</asp:Content>
<asp:Content ContentPlaceHolderId ="PlaceHolderBodyLeftBorder" runat="server">
 <div height="100%" class="ms-pagemargin"><img src="/_layouts/images/blank.gif" width='6' height='1' alt="" /></div>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

    <script type="text/javascript">
        //disable drag and drop
        ExecuteOrDelayUntilScriptLoaded(fixupDrag, 'SP.UI.ApplicationPages.Calendar.js');
        function fixupDrag() {
            var calendarCreate = SP.UI.ApplicationPages.CalendarContainerFactory.create;
            SP.UI.ApplicationPages.CalendarContainerFactory.create = function (elem, cctx, viewType, date, startupData) {
                if (cctx.dataSources && cctx.dataSources instanceof Array && cctx.dataSources.length > 0) {
                    for (var i = 0; i < cctx.dataSources.length; i++) {
                        cctx.dataSources[i].disableDrag = true;
                    }
                }
                calendarCreate(elem, cctx, viewType, date, startupData);
            }
        }
    </script>

    <style type="text/css">
	    .listRooms li{float:left; margin-left: 20px;}
	    .roomList {
		    background: none repeat scroll 0 0 #FFFFFF;
		    padding: 10px 0 0 10px;
		    position: relative;
		    float: left;
	    }
	    .roomList ul {
		    float: left;
		    padding:0;
		    white-space: nowrap;
		    list-style-type: none;
		    list-style-image: none;
		    font-size: 14px;
	    }
	    .roomList ul:first-child {
		    float: left;
	    }
	    .roomList ul li {
		    padding: 0 0 18px 42px;
		    position: relative;
	    }
	    .roomList ul li input {
		    display:none;
	    }
	    .roomList ul input {
		    left: 0;
		    position: absolute;
		    top: 4px;
	    }
	    .roomList ul .vcheckbox {
		    left: 0;
		    position: absolute;
		    top: -1px;
	    }
	    .roomList ul span {
		    color: #BBBBBB;
	    }
	
	    .vcheckbox {
		    border: 1px solid #BBBBBB;
		    cursor: pointer;
		    display: block;
		    height: 22px;
		    margin: 0;
		    padding: 0;
		    width: 22px;
	    }
	    .vcheckbox.checked {
		    background-color: #BBBBBB;
	    }
	    .ms-acal-apanel-outer
	    {
	        display:none;    
	    }
	    #DatePickerDiv
	    {
	        margin-bottom: 20px;    
	    }
	    .ms-acal-vitem {
            background-color: #D3E0F0 !important;
        }
        .ui-tooltip{
            max-width: 400px;
            width: 400px;
            }
            
        .dhx_cal_tab
        {
            display:none !important;
        }
        
        .calTitle{
            padding: 10px 0 0 30px;
        }
        .ms-acal-vlink
        {
            z-index: 99;
        }
        .ms-acal-week-top td {
          border: 2px solid #D9DDE1;
        }
        .ms-acal-hour30 td, .ms-acal-hour00 td, .ms-acal-allday td {
          border-left: 2px solid #D9DDE1;
          border-right: 2px solid #D9DDE1;
        }
        .ms-acal-today-custom {
          background-color: #E4F4FF;
        }
        .ms-acal-today-custom.ms-acal-outday {
          background-color: #D7EFFF;
        }
    </style>

    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <div class="calTitle ms-rteThemeForeColor-7-0 ms-rteFontSize-4">
                    Waiting List
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <div style="border: 0px solid red; text-align:center;" class="roomList clear">
	                <div>
		                <ul class="listRooms">

		                </ul>
	                </div>
                </div>
                <div style="clear:both;"></div>
            </td>
        </tr>

        <tr>
            <td>
                <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main" />
            </td>
        </tr>

        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
    </table>

    <style type="text/css">
    .tooltip-cal-container{font-size:8pt; font-family: Verdana,Arial,sans-serif;}
    .tooltip-cal td{padding: 3px 0; vertical-align: top;}
    </style>

    <script type="text/javascript">
    
        var inputHtml = "<input type='checkbox' id='v-flat-checkbox-{0}' value='{1}' checked='checked' />";
        var labelHtml = "<label for='v-flat-checkbox-{0}'>{1}</label>";
        var divHtml = "<div class='roomColor' style='display:none;'>{0}</div>";
        //var pepsiEvents = {};
        //var jsonData = "{-1} id: {0}, pepsico: '{1}', start_date: '{2}', duration: {3}, open: true, parent: {4} {-2}";

        String.prototype.format = function (args) {
            var str = this;
            return str.replace(String.prototype.format.regex, function (item) {
                var intVal = parseInt(item.substring(1, item.length - 1));
                var replace;
                if (intVal >= 0) {
                    replace = args[intVal];
                } else if (intVal === -1) {
                    replace = "{";
                } else if (intVal === -2) {
                    replace = "}";
                } else {
                    replace = "";
                }
                return replace;
            });
        };
        String.prototype.format.regex = new RegExp("{-?[0-9]+}", "g");

        //var str = "She {1} {0}{2} by the {0}{3}. {-1}^_^{-2}";
        //str = str.format(["sea", "sells", "shells", "shore"]);
        //alert(str);

        function RenderCalendarTooltip(strTitle, strUser, strEmail, strPhoneNumber, strLocation, strEventDate, strEndDate, strResourceRequest) {
            var arrResource = strResourceRequest.split(';#'),
                strResource = '';

            for (var i = 1; i < arrResource.length; i = i+2 ) {
                strResource += arrResource[i] + (i < arrResource.length - 1 ? ", " : "");
            }

            return "<div class='tooltip-cal-container' style='width:100%;'><div style='font-weight:bold;padding: 5px 0;'>" + strTitle + "</div><div><table class='tooltip-cal' border='0' width='100%' cellpadding='0' cellspacing='0'><tr><td width='100px'>Booked By</td><td>:&nbsp; </td><td>" + strUser + "</td></tr><tr><td>Email</td><td>:&nbsp; </td><td>" + strEmail + "</td><tr><td>Ext / Cell phone</td><td>:&nbsp; </td><td>" + strPhoneNumber + "</td></tr><tr><td>Location</td><td>:&nbsp; </td><td>" + strLocation + "</td></tr><tr><td>Start Time</td><td>:&nbsp; </td><td>" + strEventDate + "</td></tr><tr><td>End Time</td><td>:&nbsp; </td><td>" + strEndDate + "</td></tr>" + (strResource ? ("<tr><td>Resources</td><td>:&nbsp; </td><td>" + strResource + "</td></tr>") : "") + "</table></div></div>";
        }

        $(document).ready(function () {
            //tooltip
            $(document).tooltip({
                items: ".ms-acal-item",
                track: true,
                content: function () {
                    var element = $(this),
                        rawItemId = new Url($(this).find("a").attr("href")).query.ID,
                        itemId = rawItemId.split(".")[0],
                        startDate = '';

                    var html = '';

                    if (rawItemId.split(".").length > 0 && rawItemId.split(".")[1] == 0) {
                        startDate = rawItemId.split(".")[2];
                    }

                    if (itemId) {
                        if (startDate) {
                            var newStartDate = moment(startDate).format("YYYY-MM-DD HH:mm:ss Z")

                            $().SPServices({
                                operation: "GetListItems",
                                async: false,
                                listName: "Waiting List",
                                CAMLViewFields: "<ViewFields>" +
                                                    "<FieldRef Name='Title' /><FieldRef Name='User' /><FieldRef Name='Email' /><FieldRef Name='PhoneNumber' />" +
                                                    "<FieldRef Name='EventDate' />" +
                                                    "<FieldRef Name='EndDate' />" +
                                                    "<FieldRef Name='Location' />" +
			                                        "<FieldRef Name='ResourceRequest' />" +
			                                        "<FieldRef Name='MeetingRoom' />" +
                                                    "<FieldRef Name='Description' />" +
                                                    "<FieldRef Name='fRecurrence' />" +
                                                    "<FieldRef Name='RecurrenceData' />" +
                                                "</ViewFields>",
                                CAMLQuery: "<Query>" +
                                                    "<Where>" +
                                                        "<And>" +
                                                            "<Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemId + "</Value></Eq>" +
                                                            "<DateRangesOverlap>" +
                                                                "<FieldRef Name='EventDate' />" +
                                                                "<FieldRef Name='EndDate' />" +
                                                                "<FieldRef Name='RecurrenceID' />" +
                                                                "<Value Type='DateTime'>" +
                                                                    "<Today/>" +
                                                                "</Value>" +
                                                            "</DateRangesOverlap>" +
                                                        "</And>" +
                                                    "</Where>" +
                                                    "<OrderBy>" +
                                                        "<FieldRef Name='EventDate' />" +
                                                    "</OrderBy>" +
                                                "</Query>",
                                CAMLQueryOptions: "<QueryOptions>" +
                                                    "<CalendarDate>" + newStartDate + "</CalendarDate>" +
                                                    "<RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion>" +
                                                    "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
                                                "</QueryOptions>",
                                completefunc: function (xData, Status) {
                                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                        var strTitle = $(this).attr("ows_Title"),
                                            strUser = $(this).attr("ows_User"),
                                            strEmail = $(this).attr("ows_Email") ? $(this).attr("ows_Email") : '',
                                            strPhoneNumber = $(this).attr("ows_PhoneNumber") ? $(this).attr("ows_PhoneNumber") : '',
                                            strLocation = $(this).attr("ows_Location") ? $(this).attr("ows_Location") : '',
                                            strEventDate = moment($(this).attr("ows_EventDate"), "YYYY-MM-DD HH:mm:ss").format("MMMM DD YYYY, hh:mm A"),
                                            strEndDate = moment($(this).attr("ows_EndDate"), "YYYY-MM-DD HH:mm:ss").format("MMMM DD YYYY, hh:mm A"),
                                            strResourceRequest = '';

                                        $().SPServices({
                                            operation: "GetListItems",
                                            async: false,
                                            listName: "Meeting Rooms",
                                            CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='AvailableResources' /></ViewFields>",
                                            CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + $(this).attr("ows_MeetingRoom").split(';#')[0] + "</Value></Eq></Where></Query>",
                                            completefunc: function (xData, Status) {
                                                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                                    strResourceRequest = $(this).attr("ows_AvailableResources");
                                                });
                                            }
                                        });

                                        if ($.trim(strResourceRequest) != '' && $.trim($(this).attr("ows_ResourceRequest")) != '') strResourceRequest += ";#";
                                        strResourceRequest += $(this).attr("ows_ResourceRequest");

                                        html = RenderCalendarTooltip(strTitle, strUser.split(';#')[1], strEmail, strPhoneNumber, strLocation, strEventDate, strEndDate, strResourceRequest);
                                    });
                                }
                            });
                        }
                        else {
                            $().SPServices({
                                operation: "GetListItems",
                                async: false,
                                listName: "Waiting List",
                                CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='User' /><FieldRef Name='Email' /><FieldRef Name='PhoneNumber' /><FieldRef Name='Location' /><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='ResourceRequest' /><FieldRef Name='MeetingRoom' /></ViewFields>",
                                CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemId + "</Value></Eq></Where></Query>",
                                completefunc: function (xData, Status) {
                                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                        var strTitle = $(this).attr("ows_Title"),
                                            strUser = $(this).attr("ows_User"),
                                            strEmail = $(this).attr("ows_Email") ? $(this).attr("ows_Email") : '',
                                            strPhoneNumber = $(this).attr("ows_PhoneNumber") ? $(this).attr("ows_PhoneNumber") : '',
                                            strLocation = $(this).attr("ows_Location") ? $(this).attr("ows_Location") : '',
                                            strEventDate = moment($(this).attr("ows_EventDate"), "YYYY-MM-DD HH:mm:ss").format("MMMM DD YYYY, hh:mm A"),
                                            strEndDate = moment($(this).attr("ows_EndDate"), "YYYY-MM-DD HH:mm:ss").format("MMMM DD YYYY, hh:mm A"),
                                            strResourceRequest = '';

                                        $().SPServices({
                                            operation: "GetListItems",
                                            async: false,
                                            listName: "Meeting Rooms",
                                            CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='AvailableResources' /></ViewFields>",
                                            CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + $(this).attr("ows_MeetingRoom").split(';#')[0] + "</Value></Eq></Where></Query>",
                                            completefunc: function (xData, Status) {
                                                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                                    strResourceRequest = $(this).attr("ows_AvailableResources");
                                                });
                                            }
                                        });

                                        if ($.trim(strResourceRequest) != '' && $.trim($(this).attr("ows_ResourceRequest")) != '') strResourceRequest += ";#";
                                        strResourceRequest += $(this).attr("ows_ResourceRequest");

                                        html = RenderCalendarTooltip(strTitle, strUser.split(';#')[1], strEmail, strPhoneNumber, strLocation, strEventDate, strEndDate, strResourceRequest);
                                    });
                                }
                            });
                        }

                    }


                    return html;
                },
                open: function (e, ui) {
                    $(".ui-tooltip").not($(ui.tooltip)).remove();
                }
            });

            setInterval(function () {
                if (SP.UI.ModalDialog.get_childDialog() != null) {
                    $(".ui-tooltip").remove();
                }
            }, 1000);

            $('.listRooms input').on('ifChecked ifUnchecked ifCreated', function (event) {
                if (event.type == 'ifChecked') {
                    var color = $(this).parents("li:last").find(".roomColor").text();
                    $(this).parent().css("background-color", color);

                }
                else if (event.type == 'ifUnchecked') {
                    $(this).parent().css("background-color", "transparent");

                }
                else if (event.type == 'ifCreated') {
                    if ($(this).prop('checked')) {
                        var color = $(this).parents("li:last").find(".roomColor").text();
                        $(this).parent().css("background-color", color);
                    }
                }

                ColourCalendarItem($(this).val());
            }).iCheck({
                checkboxClass: 'vcheckbox'
            });

            function ColourCalendarItem(color, checked) {
                $("div.ms-acal-item[colour = '" + color + "']").each(function () {

                    $(this).toggle();

                });
            }


        });


        $().SPServices({
            operation: "GetListItems",
            async: false,
            webURL: $().SPServices.SPGetCurrentSite(),
            listName: "Meeting Rooms",
            CAMLQuery: "<Query><Where><Eq><FieldRef Name='IsOutside' /><Value Type='Boolean'>0</Value></Eq></Where></Query>",
            CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Color' /></ViewFields>",
            completefunc: function (xData, Status) {
                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                    var liHtml = "<li>";
                    liHtml += inputHtml.format([$(this).attr("ows_ID"), $(this).attr("ows_Color")]);
                    liHtml += labelHtml.format([$(this).attr("ows_ID"), $(this).attr("ows_Title")]);
                    liHtml += divHtml.format([$(this).attr("ows_Color")]);
                    liHtml += "</li>";
                    $(".listRooms").append(liHtml);
                    //alert(liHtml);
                });
            }
        });

    </script>
		
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
	padding: 0px;
}
</style>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">
<SharePoint:ListProperty CssClass="ms-listdescription" Property="Description" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderCalendarNavigator" runat="server">
  <SharePoint:SPCalendarNavigator id="CalendarNavigatorId" runat="server"/>
  <ApplicationPages:CalendarAggregationPanel id="AggregationPanel" runat="server"/>
</asp:Content>